<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p>通过计算属性过滤数组</p>
        <span v-for="(book,index) in booksFilter" :key="index">{{book.title}}</span>
        <br>
        <p>通过计算属性对数组排序</p>
        <span v-for="(book,index) in booksSort" :key="index+'sort'">{{book.title}}</span>
        <p>v-for中的key属性，需要在key之前加上v-bind，来保证它的属性值是变量</p>
        <hr>
        <button data-index="7"  @click="clickHandler('arg1',$event)">click</button>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                books:[
                    {
                        title: 'HTML',
                        author: 'AAA'
                    },
                    {
                        title: 'CSS',
                        author: 'BBB'
                    },
                    {
                        title: 'JS',
                        author: 'CCC'
                    },
                    {
                        title: 'VUE',
                        author: 'CCC'
                    },
                ]
            },
            computed: {
                booksFilter: function(){
                    return this.books.filter(book =>{
                        return book.author.match(/CCC/)
                    })
                },
                booksSort: function(){
                    return this.books.sort(function(a,b) {
                       return b.title.length - a.title.length
                    })
                }
            },
            methods: {
                clickHandler(arg1,e) {
                    console.log(arg1)
                    console.log(e)
                }
            },
        })
    </script>
</body>
</html>